<template>
  <header class="w-full fixed left-0 top-0 text-white shadow-lg header">
    <div class="max-w-7xl mx-auto px-4 py-2 flex items-center justify-between">
      <a href="#" class="text-xl font-semibold cursor-pointer">LYC</a>
      <!-- 导航菜单 -->
      <nav :class="['md:flex md:space-x-4 md:text-base transition-all']">
        <ul class="flex flex-col md:flex-row md:space-x-4 text-sm">
          <li
            class="cursor-pointer hover:text-blue-400"
            :class="{ active: isActive('/home') }"
            @click="changeComponentByRoute('/home')"
          >
            <a class="flex items-center space-x-2">
              <i class="fas fa-home"></i>
              <span>首页</span>
            </a>
          </li>
          <li
            v-for="k in headerData"
            :key="k.icon"
            class="cursor-pointer hover:text-blue-400"
            :class="{ active: k.isActive }"
            @click="changeComponent(k.component, k)"
          >
            <a class="flex items-center space-x-2">
              <i :class="k.icon"></i>
              <span>{{ k.text }}</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </header>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'
const props = defineProps({
  headerData: {
    type: Array,
    required: true,
    default: () => []
  },
  activeRoute: {
    type: String,
    required: true,
    default: ''
  }
})
// 判断当前路径是否是激活的路径
const isActive = (route) => props.activeRoute === route

const emit = defineEmits(['changeComponentByRoute', 'changeComponent'])
const changeComponentByRoute = (route) => {
  emit('changeComponentByRoute', route)
}
const changeComponent = (component, item) => {
  emit('changeComponent', component, item)
}
</script>

<style scoped>
.header {
  background-color: rgba(46, 54, 71, 0.8); /* 半透明背景 */
  backdrop-filter: blur(10px) !important; /* 模糊效果 */
  z-index: 10;
}
.active {
  color: #1d4ed8; /* 高亮色（蓝色） */
  font-weight: bold; /* 加粗 */
}
</style>
